<!-- 注册
 1. vue始终在用双向绑定的思想来准备前后端交互，每一个vue都会定义好变量给 表单（form）或者表格（table）中的html元素的值绑定
-->
<template>
  <div><!-- element组件库的Dialog对话框默认可以通过点击 modal 关闭 Dialog，即点击空白处弹框可关闭。 -->
    <!-- :visible.sync 子组键改变父组件的值 控制子组件的显示-->
    <el-dialog title="新增" :visible.sync="editDialogIsShow" :before-close="handleClose" :close-on-click-modal="false">
      <el-form  :model="actcosttyperecord" label-width="100px" :rules="editActcosttyperecordRules" ref="editActcosttyperecordForm">
        <el-form-item label="活动消费券名称" prop="afcname">
          <el-col :span="8">
            <el-input v-model="actcosttyperecord.afcname"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="活动消费券金额" prop="afcprice">
          <el-col :span="8">
            <el-input v-model="actcosttyperecord.afcprice"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="开始日期">
          <el-col :span="8">
            <el-date-picker type="date" placeholder="选择日期" v-model="actcosttyperecord.afcbegindate" style="width: 250px;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="1">-</el-col>
          <el-col :span="8">
            <el-time-picker placeholder="选择时间" v-model="actcosttyperecord.afcbegintime" style="width: 200px;"></el-time-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="结束日期">
          <el-col :span="8">
            <el-date-picker type="date" placeholder="选择日期" v-model="actcosttyperecord.afcenddate" style="width: 250px;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="1">-</el-col>
          <el-col :span="8">
            <el-time-picker placeholder="选择时间" v-model="actcosttyperecord.afcendtime" style="width: 200px;"></el-time-picker>
          </el-col>
        </el-form-item>
      </el-form>
      <span>
      <el-button type="success" @click="editActcosttyperecord('editActcosttyperecordForm')">注册</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>
  import rules from "../../../../static/js/validator/rules.js"
  import api from "../../../../axios/api";
  export default {
    name: "editActcosttyperecord",
    data(){
      return {actcosttyperecord:{},
        editDialogIsShow: false,
        editActcosttyperecordRules:{ afcname: [{required: true, message: "名称不能为空", trigger: 'blur'},
            {max: 20, min: 2, message: '长度异常 长度在2-20之间', trigger: 'blur'}, {
              pattern: /^[\u0391-\uFFE5A-Za-z]+$/,
              message: '名称必须为中文',
              trigger: 'blur'
            }],
          afcprice: [{required: true, message: "优惠券面额不能为空", trigger: 'blur'},
            {max: 20, min: 2, message: '长度异常 长度在2-20之间', trigger: 'blur'}, {
              pattern: /^\d+$|^\d+[.]?\d+$/,
              message: '金额必须为数字',
              trigger: 'blur'
            }],
        }
      }
    },
    methods: {
      editActcosttyperecord:function(editActcosttyperecordForm){
        this.$refs[editActcosttyperecordForm].validate(valid => {//此处refs对象和标签上的ref对应
          if (valid) {
            //如果通过验证 to do...
            console.log(this.actcosttyperecord);
            // alert(this.actcosttyperecord.cname+"添加成功");
            this.setDataFromAxios();
            this.handleClose();
          } else {
            console.log('error submit!!')
            return false
          }
        })},
      //页面初始化时加载的事件
      init() {
        this.editDialogIsShow = true;
      },
      setDataFromAxios:function(){
        //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
        api.setDataFromAxios("/api/actCosttyperecordController/editActCosttyperecord",this.actcosttyperecord,"post")
          .then(res=>{
            this.leagues = res.leagues});//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
      },
      //关闭页面
      handleClose() {
        this.editDialogIsShow = false;
        //给父组件传参
        this.$emit("editDialogIsShow", this.editDialogIsShow);
      }
    },

    //监听
    watch: {
      dialogisShow(newValue, oldValue) {
        this.editDialogIsShow = newValue;
      }
    }

  }
</script>

<style scoped>

</style>
